/*
 * @Author: 
 * @Date: 2022-02-24 16:23:13
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-28 10:02:59
 * @Description: 请填写简介
 */
import React, { Fragment, useState, useRef, useEffect } from 'react'
import CheckCss from './styles/CheckBox.module.less'
import { Checkbox } from 'antd'

let t
export default function VCkeckBox(props) {
  const bas = useRef()
  const [basWidth, setBasWidth] = useState(150)
  const boolNode = useRef()
  const [basTop, setBasTop] = useState(0)
  const [show, setShow] = useState(false)
  const [postision, setPostision] = useState({ x: 0, y: 0 })
  
  const handleChange = (val, item) => {
    props.changeNode(val, item)
  }

  useEffect(() => {
    boolNode.current = props.node.children && props.node.children.length > 0
  }, [])

  // 动态样式
  const handleEnter = (e) => {
    const { delay } = props
    setPostision({ x: e.clientX, y: e.clientY })
    if (!props.node.children || props.node.children.length <= 0) return
    t = setTimeout(() => {
      setShow(true)
      getBasWidth()
      getBasTop()
    }, delay)
  }
  const handleLeave = () => {
    clearTimeout(t)
    setShow(false)
  }
  const getBasRec = () => {
    return new Promise(function (resolve, reject) {
      const basEle = bas.current
      if (basEle) {
        basEle.style['z-index'] = 1000
      }
      const data = {
        width: basEle.offsetWidth,
        height: basEle.offsetHeight,
        bottom: document.documentElement.clientHeight - 2 * postision.y
      }
      resolve(data)
    })
  }
  const getBasTop = () => {
    getBasRec().then(res => {
      const { bottom, height } = res
      if (height < 100) {
        setBasTop(-8)
        return
      }
      if (bottom > 0) {
        setBasTop(-height / 5)
      } else {
        setBasTop(-height / 6 * 5)
      }
    })
  }
  const getBasWidth = () => {
    getBasRec().then(res => {
      const { width } = res
      setBasWidth(width > 80 ? width - 20 : 80)
    })
  }
  return (
    <div className={CheckCss.vCheckbox}>
      <div className={CheckCss.out} onMouseEnter={e => handleEnter(e)} onMouseLeave={e => handleLeave(e)}>
        <div className={`${CheckCss.parent} ${CheckCss.inner}`}>
          <Checkbox
            checked={props.node.checked}
            disabled={props.notEdit}
            indeterminate={props.node.isIndeterminate}
            onChange={e => handleChange(e, props.node)}
          >
            {props.node.name}
            <span className={CheckCss.count}>({props.node.count})</span>
          </Checkbox>
        </div>
        {
          boolNode.current ?
            show ?
              <div
                ref={bas}
                className={`${CheckCss.child} ${CheckCss.bas}`}
                style={{ right: '-' + basWidth + 'px', top: basTop +'px'}}
              >
                {
                  props.node.children.map(it => {
                    return <Fragment key={it.code}>
                      <VCkeckBox
                        node={it}
                        tree={props.tree}
                        notEdit={props.notEdit}
                        currentSelectedInfo={props.currentSelectedInfo}
                        changeNode={(e, it) => handleChange(e, it)}
                      />
                    </Fragment>
                  })
                }
              </div> : <></>
            : <></>
        }
      </div>
    </div>
  )
}
